<template>
  <div class="container">
    <div class="video-wrapper">
      <template v-if="showLiveHuman">
        <!-- 数字人组件 -->
        <LiveHuman />
      </template>
      <template v-else>
        <!-- 视频播放器 -->
        <video class="demo-video large" ref="playerLeft" preload="auto" muted autoplay
          @click="reloadVideo('left')"></video>
      </template>
    </div>
  </div>
  <!-- 添加控制按钮 -->
  <div class="controls">
    <el-button @click="togglePlay">{{ isPlaying ? '暂停' : '播放' }}</el-button>
    <el-button @click="reloadBothVideos">重新加载</el-button>
    <el-button @click="yolo">目标检测</el-button>
    <el-button @click="livehuman">数字人</el-button>
  </div>
</template>

<script>
import flvjs from "flv.js";
import LiveHuman from "./livehuman.vue";

export default {
  components: { LiveHuman },
  data() {
    return {
      idLeft: "1",
      selectedRtspLeft: "rtsp://10.112.89.161:8554/inputcam",
      playerLeft: null,
      isPlaying: true,
      showLiveHuman: false
    };
  },
  mounted() {
    this.playVideo(this.selectedRtspLeft, 'left');
  },
  methods: {
    playVideo(rtsp, side) {
      this.$nextTick(() => { // 确保 DOM 更新完成
        if (flvjs.isSupported()) {
          let video = this.$refs.playerLeft;
          if (!video) return; // 确保 video 元素存在
          let player = flvjs.createPlayer({
            type: "flv",
            isLive: true,
            url: `ws://10.112.241.175:2333/rtsp/${this.idLeft}/?url=${rtsp}`
          });
          player.attachMediaElement(video);
          try {
            player.load();
            player.play().catch(error => console.warn("Playback error:", error));
            this.playerLeft = player;
          } catch (error) {
            console.log(error);
          }
        }
      });
    },
    reloadVideo() {
      if (this.playerLeft) {
        this.playerLeft.destroy(); // 销毁播放器实例
        this.playerLeft = null;
      }
      // 重新加载视频
      this.playVideo(this.selectedRtspLeft, 'left');
    },
    reloadBothVideos() {
      this.reloadVideo();
    },
    togglePlay() {
      if (this.isPlaying) {
        this.$refs.playerLeft.pause();
      } else {
        this.$refs.playerLeft.play();
      }
      this.isPlaying = !this.isPlaying;
    },
    // background() {
    //   this.showLiveHuman = false;
    //   this.reloadBothVideos();
    //   this.selectedRtspLeft = "rtsp://10.112.89.161:8554/inputcam";
    //   this.reloadBothVideos();
    // },
    yolo() {
      this.showLiveHuman = false;
      this.reloadBothVideos();
      this.selectedRtspLeft = "rtsp://10.112.89.161:8554/frame";
      this.reloadBothVideos();
    },
    livehuman() {
      // 切换到显示数字人
      this.showLiveHuman = true;
      // 停止当前播放的视频
      if (this.playerLeft) {
        this.playerLeft.pause();
        this.playerLeft.destroy();
        this.playerLeft = null;
      }
    }
  },
  beforeDestroy() {
    if (this.playerLeft) this.playerLeft.destroy();
  }
};
</script>

<style scoped>
.container {
  display: flex;
  align-items: center;
  height: 80%;
  overflow: hidden;
}

.video-wrapper {
  display: flex;
  width: 100%;
  max-width: 100%;
}

.demo-video.large {
  width: 100%;
  /* 单窗口占满宽度 */
  height: 100%;
  object-fit: contain;
}

.controls {
  display: flex;
  justify-content: center;
  margin-top: 20px;
}
</style>
